<template>
	<view class="title">
		注册账号
	</view>
	<view class="avatar">
		<view class="box">
			<uni-file-picker @success="uploadSuccess" limit="1" :del-icon="false" 
			disable-preview :auto-upload="false" v-model="imageValue" :imageStyles="imageStyles"
			file-mediatype="image" ref="files">选择</uni-file-picker>
		</view>
	</view>
	<button @click="upload" class="upload">上传</button>
	<view class="username">
		<input v-model="username" type="text" placeholder="请输入用户名" />
	</view>
	<view class="password">
		<input v-model="password" type="safe-password" :password="!showPassword" placeholder="请输入密码" />
	</view>
	<view class="password">
		<input v-model="repeat_password" type="safe-password" :password="!showPassword" placeholder="请再次输入相同密码" />
	</view>
	<view class="email">
		<input v-model="email" placeholder="请输入邮箱" />
	</view>
	<view class="number">
		<input v-model="number" placeholder="请输入电话号码" />
	</view>
	
	
	<button @click="signup" class="signup">注册</button>
</template>

<script setup>
	import { ref } from 'vue'
	const checked = ref(false)
	const showPassword = ref(false)
	const username = ref("")
	const password = ref("")
	const repeat_password = ref("")
	const email = ref("")
	const number = ref("")
	const imageValue = ref()
	const imageStyles = ref({
					width: 140,
					height: 140,
					border: {
						radius: '50%'
					}
				})
	const files = ref()
	const imageUrl = ref('')
	const upload = () => {
		uni.showLoading({
			title: '上传图片中……',
			mask: true
		})
		files.value.upload()
	}
	const uploadSuccess = (res) => {
		
		console.log(res);
		let filePath = res.tempFilePaths[0]
		uniCloud.uploadFile({
			filePath: filePath,
			cloudPath: Date.now() + '.jpg'
		}).then((res) => {
			imageUrl.value = res.fileID
			console.log(imageUrl.value);
			uni.showToast({
				title: '上传成功！',
				icon: 'success'
			});
		}).catch((err) => {
			console.log(err.message);
			uni.showToast({
				title: '上传失败！' + err.message,
				icon: 'error'
			});
		}).finally((res) => {
			uni.hideLoading()
		})
	}
	
	const isLegal = async () => {
		let title = "注册成功"
		let status = false
		if (username.value === "") {
			title = "用户名不能为空"
		} else if (password.value.length < 6 || password.value.length > 30) {
			title = "密码不能少于6或大于30个字符"
		} else if (password.value !== repeat_password.value) {
			title = "两次输入密码不相同"
		} else if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email.value)) {
			title = "邮箱格式不合法"
		} else if (number.value.length !== 11) {
			title = "手机号码不为11位"
		} else {
			status = true
		}
		if (status) {
			const db = uniCloud.database()
			let res = await db.collection('user')
				.where(`username == '${username.value}'`)
				.get()
			if (res.result.data.length > 0) {
				title = "用户名已存在"
				status = false
			}
		}
		if (!status) {
			uni.showToast({
				title: title,
				icon: 'error',
				duration: 1000
			})
		}
		
		return status
	}
	
	const signup = async () => {
		// if (!(await isLegal())) return
		uni.showLoading({
			title: '注册中……',
			mask: true
		})
		console.log(imageUrl.value);
		if (imageUrl.value === "") {
			imageUrl.value = "https://mp-0e7906ed-7cd9-4844-b5ca-b3b1d7d050a9.cdn.bspapp.com/cloudstorage/8a7de97e-999b-4f08-ab97-1b2f56ff744e.jpg"
		}
		uniCloud.callFunction({
			name: 'addUser',
			data: {
				username: username.value,
				password: password.value,
				email: email.value,
				number: number.value,
				avatar: imageUrl.value,
				status: 0
			}
		}).then((res) => {
			console.log(res);
			uni.hideLoading()
			uni.showToast({
				title: '注册成功！'
			})
			uni.navigateTo({
				url: '/pages/login_index/login_index'
			})
		}).catch((err) => {
			console.log(err.message);
		}).finally(() => {
			uni.hideLoading()
		})
		
		
	}
</script>

<style lang="scss" scoped>
	$space-top: 60rpx;

	.title {
		font-size: 56rpx;
		font-weight: 550;
		margin-left: 60rpx;
		margin-bottom: 70rpx;
		padding-top: $space-top;
	}

	.username {
		input {
			background-image: url(../../static/user.png);
			background-repeat: no-repeat;
			background-position: 10rpx;
		}
	}

	.password {
		display: flex;
		align-items: center;
		
		input {
			background-image: url(../../static/password.png);
			background-repeat: no-repeat;
			background-position: 10rpx;
		}
		.eye {
			position: absolute;
			right: 90rpx;
		}
	}
	
	.email {
		input {
			background-image: url(../../static/email.png);
			background-repeat: no-repeat;
			background-position: 34rpx;
			background-size: 50rpx;
		}
	}
	
	.number {
		input {
			background-image: url(../../static/phone.png);
			background-repeat: no-repeat;
			background-position: 35rpx;
			background-size: 46rpx;
		}
	}
	
	.avatar {
		margin: 50rpx 280rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	
	.upload {
		background-color: #FFAD63;
		width: 320rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 40rpx;
		font-size: 32rpx;
		color: white;
		font-weight: 600;
		box-shadow: 0rpx 0rpx 30rpx #FFAD63;
		// margin: 0 20rpx;
		margin-bottom: 50rpx;
	}

	input {
		background-color: #FFE7D1;
		width: 500rpx;
		padding: 30rpx 30rpx;
		padding-left: 100rpx;
		margin: 20rpx auto;
		border-radius: 40rpx;
	}

	.signup {
		background-color: #FFAD63;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		margin: 100rpx 60rpx;
		border-radius: 30rpx;
		height: 107rpx;
		font-weight: 600;
		box-shadow: 0rpx 0rpx 70rpx #FFAD63;
	}

</style>